Tabbed Forum Home Installation Instructions.

NOTE: Keep in mind, I wrote this with the assumption that you are fairly well versed and comfortable with editing files and following the flow of things.  If there is something you don't understand, PLEASE let me know so that I can help you understand it.

Initial Set Up Steps (1-4):

1. Create a directory in your FORUMS root and name it "tabs"  ie, /forums/tabs  Then upload the images, tabcontent.js and tabcontent.css files into the tabs directory

2. Make a COPY of index.php and rename the copy index_tab.php

3. Log into the ACP and Create a NEW Child Style for the Style you wish to use Forum Home Tabs on.  Make sure this is NOT a selectable style (at this point).

4. Test the index_tab.php with the NEW Child style by changing to that style and bring up index_tab.php.  It SHOULD look just the same as the parent style with index.php (at this point). 

NOTE: The reason for doing it this way is so that you can work on this without shutting down your site.  Once the entire process of this MOD is completed/Tested on the Test Style, you can Copy the Template Into the Main Style and delete the Child Style created in Step 3 as well as rename index_tab.php index.php  This will again be explained at the end of this document.

Now that we have all the above in place, we can start to add some code to the index_tab.php file and the FORUMSHOME template in the NEW Child Style.  


INDEX.PHP Steps (5-9)

Before we move on, you will need to have a plan on how you want to break out your Forum Home into Tabs. ie, Tab Names and the Category (or Categories) that you want under each Tab.  You will need to have the CATEGORY ID numbers (also known as forum id) for each Category you want to use.

5.  Open up index_tab.php in your editor of choice.

6.  Locate this line of code (it is almost at the end of the file)  

	$forumbits = construct_forum_bit($forumid);

7.  Add a new line below it for each Category you wish to have displayed under each tab.

In the example below, the Category ID is the first number in the ( ).  The 2nd number needs to be 1 and the 3rd must be 0.  This is the pattern in which the construct_forum_bit function expects the data to come in.

	// Construct Tabbed Forum Home forumbits 
	// Category for Tab 2, pulls forum and sub form data from Category (Forum ID 1)
	$forumbits2 = construct_forum_bit(1,1,0); 
	// Category 1 for Tab 3
	$forumbits3a = construct_forum_bit(10,1,0); 
	// Category 2 for Tab 3
	$forumbits3b = construct_forum_bit(15,1,0); 
	// Category 3 for Tab 3
	$forumbits3c = construct_forum_bit(50,1,0); 

NOTE: You can name the Variables anything you like, however, I chose to keep the standard variable name "$forumbits" and just expand on it ...  You can remove the exccess // Remarks as well. I just have them so it is easier to follow along and edit.


8.  SAVE the modified index_tab.php and upload it back to the forums root.  

9.  Re-Run step 4 above making sure you are looking at index_tab.php and the new child style.  Everything SHOULD still be the same.  This is just to make sure no syntax errors were created during the modification of the index_tab.php



FORUMHOME TEMPLATE STEPS (10  18) 

This is where you will visually start seeing the Tabbed Forum Home page come together (on the NEW style that is).


10.  Log into the ACP and grab the FORUMHOME template code from the Child Style you created in STEP 3 above.  Paste the copied template code into your favorite editor of choice (or just make the changes right in the template edit window if you want to).

11.  Add the following lines of code to the <head> </head> area of the template.

<!-- Tabbed Forum Home Header Code -->	
<link rel="stylesheet" type="text/css" href="http://www.domain.com/forums/tabs/tabcontent.css" /> 
<script type="text/javascript" src="http://www.domain.com/forums/tabs/tabcontent.js"> </script>
<!-- /Tabbed Forum Home Header Code -->

NOTE: Make sure to replace the URL info in these 2 lines of code to reflect the actual site domain name and the correct paths to the uploaded files.


Now the fun starts.  This next part is actually constructing the Tabs.  It consists of blocks of Code and the Variables created in Step 7 above.  I suggest building 1 Tab at a time and then testing to make sure you dont make any errors.


12. Locate the HTML comment <!-- main --> 

NOTE: The code between the <!-- main --> and <!-- /main --> is where most of the additional code will be placed. (one small chunk goes immediately after <!-- /main --> ) 

NOTE 2:  We will be using the existing "main" code in this sample setup for the Tab 1.  Tab 2 and Tab 3 will have custom code (That way you get to see how to use both).  Tab 1 will display ALL Forums (just like the default way the forum home currently displays).  Tab 2 will display 1 single Category and Tab 3 will display multiple Categories.   


13.  Insert the following block of code after <!-- main -->  This block of code is what creates the Tabs themselves (along with the CSS for the look).  

	<!-- Tabbed Forum Home Tabs Layout -->
	<ul id="forumtabs" class="shadetabs"> 
	<li><a href="#" rel="tcontent1" class="selected">Tab 1 Name</a></li> 
	<li><a href="#" rel="tcontent2">Tab 2 Name</a></li> 
	<li><a href="#" rel="tcontent3">Tab 3 Name</a></li> 
	</ul> 
	<!-- /Tabbed Forum Home Tabs Layout -->  

14.  Insert the following lines of code directly below the above inserted block of code. 

	<!-- Tabbed Forum Home  START Tab 1 Content Layout -->
	<div id="tcontent1" class="tabcontent">

15.  Now find $forumhome_markread_script and Insert the following lines of code directly AFTER $forumhome_markread_script

	</div>
	<!-- /Tabbed Forum Home  END Tab 1 Content Layout -->

16.  Insert this block of code AFTER <!-- /main --> and before the two <br /> tags

	<!-- Tabbed Forums switch tab script -->
	<script type="text/javascript">
	var myforumtabs=new ddtabcontent("forumtabs") 
	myforumtabs.setpersist(true) 
	myforumtabs.setselectedClassTarget("link") 
	myforumtabs.init()
	</script>
	<!-- /end Tabbed Forums switch tab script -->


17.  OK - lets take a quick look and check our work. The NEW <!-- main --> should look like this: 

<!-- main -->

<!-- Tabbed Forum Home Tabs Layout -->
<ul id="forumtabs" class="shadetabs"> 
<li><a href="#" rel="tcontent1" class="selected"> Tab 1 Name </a></li> 
<li><a href="#" rel="tcontent2"> Tab 2 Name </a></li> 
<li><a href="#" rel="tcontent3"> Tab 3 Name </a></li> 
</ul> 
<!-- /Tabbed Forum Home Tabs Layout -->

<!-- Tabbed Forum Home  START Tab 1 Content Layout -->
<div id="tcontent1" class="tabcontent">

<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<thead>
	<tr align="center">
	  <td class="thead">&nbsp;</td>
	  <td class="thead" width="100%" align="$stylevar[left]">$vbphrase[forum]</td>
	  <td class="thead" width="175">$vbphrase[last_post]</td>
	  <td class="thead">$vbphrase[threads]</td>
	  <td class="thead">$vbphrase[posts]</td>
	  <if condition="$vboptions['showmoderatorcolumn']">
	  <td class="thead">$vbphrase[moderator]</td>
	  </if>
	</tr>
</thead>

$forumbits

<tbody>
	<tr>
		<td class="tfoot" align="center" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>"><div class="smallfont"><strong><a href="forumdisplay.php?$session[sessionurl]do=markread" rel="nofollow">$vbphrase[mark_forums_read]</a><if condition="$vboptions['forumleaders']">&nbsp; &nbsp;
			<a href="showgroups.php$session[sessionurl_q]" rel="nofollow">$vbphrase[view_forum_leaders]</a></if></strong></div></td>
	</tr>
</tbody>
</table>

$forumhome_markread_script

</div>
<!-- /Tabbed Forum Home - END Tab 1 Content Layout -->

<!-- /main -->

<!-- Tabbed Forums switch tab script -->
<script type="text/javascript">
var myforumtabs=new ddtabcontent("forumtabs") 
myforumtabs.setpersist(true) 
myforumtabs.setselectedClassTarget("link")
myforumtabs.init()
</script>
<!-- /end Tabbed Forums switch tab script -->

<br />
<br />

<!-- what's going on box -->


What you have now at this point is Tab 1 Complete which uses the $forumbits variable (All Forums).  In this sample setup, Tab 1 will out put an exact duplicate of the normal forums home. You can test it at this point if you want to by saving what you have in the template and refreshing the index_tab.php page.  Tab 2 and Tab 3 will not display any data at this point tho.


CONSTRUCTING TAB 2

Next up - adding code for Tab 2 (which in this example is a single Category).  Note: you might want to choose a category ID which contains multiple forums with some sub forums. 

Below is the sample block of code that we'll use for Tab 2.  This block of code will be inserted into the <!-- main --> area directly following the first tab.  


18.  Find the tab 1 end comment (<!-- /Tabbed Forum Home - END Tab 1 Content Layout -->) and insert this directly after.

<!-- Tabbed Forum Home  START Tab 2 Content Layout -->
<div id="tcontent2" class="tabcontent">

<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<thead>
	<tr align="center">
	  <td class="thead">&nbsp;</td>
	  <td class="thead" width="100%" align="$stylevar[left]">$vbphrase[forum]</td>
	  <td class="thead" width="175">$vbphrase[last_post]</td>
	  <td class="thead">$vbphrase[threads]</td>
	  <td class="thead">$vbphrase[posts]</td>
	  <if condition="$vboptions['showmoderatorcolumn']">
	  <td class="thead">$vbphrase[moderator]</td>
	  </if>
	</tr>
</thead>

<!-- CUSTOM tbody CODE BASED ON YOUR STYLE -->
<tbody>
	<tr>
		<td class="tcat" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>"><a style="float:right" href="#top" onclick="return toggle_collapse('forumbit_66')"><img id="collapseimg_forumbit_66" src="images/solido/buttons/collapse_tcat.gif" alt="" border="0" /></a><a href="forumdisplay.php?f=6">CATEGORY NAME</a></td>
	</tr>
</tbody>

<tbody id="collapseobj_forumbit_66" style="">
$forumbits2
</tbody>
<!-- /CUSTOM tbody CODE BASED ON YOUR STYLE -->


<tbody>
	<tr>
		<td class="tfoot" align="center" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>"><div class="smallfont"><strong><a href="forumdisplay.php?$session[sessionurl]do=markread" rel="nofollow">$vbphrase[mark_forums_read]</a><if condition="$vboptions['forumleaders']">&nbsp; &nbsp;<a href="showgroups.php$session[sessionurl_q]" rel="nofollow">$vbphrase[view_forum_leaders]</a></if></strong></div></td>
	</tr>
</tbody>
</table>

$forumhome_markread_script

</div>
<!-- /Tabbed Forum Home  END Tab 2 Content Layout -->

NOTE:  You will see that there is a Custom tbody chunk of code in this example. That is because we are bypassing one of the stock vB templates so that we can override and create a tabbed layout.

NOTE 2:  With this custom tbody, you will have to enter the Category Name and ID # (appended to the URL).  Also, to make the collapse stuff work correctly, you will have to use unique #s.  I just double the forum id #.  ie, if its forum id 6, I make them 66 (you can see that in the example)... 

NOTE 3: To create more Tabs, you just repeat the above example as many times as you want to. 

NOTE 4: To have multiple Categories under one Tab, just add more <tbody> chunks one after the other. (see example below)

<!-- CUSTOM tbody CODE BASED ON YOUR STYLE -->
<tbody>
	<tr>
		<td class="tcat" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>"><a style="float:right" href="#top" onclick="return toggle_collapse('forumbit_66')"><img id="collapseimg_forumbit_66" src="images/solido/buttons/collapse_tcat.gif" alt="" border="0" /></a><a href="forumdisplay.php?f=6">CATEGORY NAME</a></td>
	</tr>
</tbody>

<tbody id="collapseobj_forumbit_66" style="">
$forumbits2
</tbody>
<!-- /CUSTOM tbody CODE BASED ON YOUR STYLE -->
<!-- CUSTOM tbody CODE BASED ON YOUR STYLE -->
<tbody>
	<tr>
		<td class="tcat" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>"><a style="float:right" href="#top" onclick="return toggle_collapse('forumbit_1616')"><img id="collapseimg_forumbit_1616" src="images/solido/buttons/collapse_tcat.gif" alt="" border="0" /></a><a href="forumdisplay.php?f=16">CATEGORY NAME</a></td>
	</tr>
</tbody>

<tbody id="collapseobj_forumbit_1616" style="">
$forumbits3a
</tbody>
<!-- /CUSTOM tbody CODE BASED ON YOUR STYLE -->


=========================================================================

OK - here is a FULL default <!-- main --> to use as an example.. 


<!-- main -->


<!-- Tabbed Forum Home Tabs Layout -->
<ul id="forumtabs" class="shadetabs"> 
<li><a href="#" rel="tcontent1" class="selected">Tab 1 Name</a></li> 
<li><a href="#" rel="tcontent2">Tab 2 Name</a></li> 
<li><a href="#" rel="tcontent3">Tab 3 Name</a></li> 
</ul> 

<!-- /Tabbed Forum Home Tabs Layout -->
<!-- Tabbed Forum Home  START Tab 1 Content Layout -->
<div id="tcontent1" class="tabcontent">

<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<thead>
	<tr align="center">
	  <td class="thead">&nbsp;</td>
	  <td class="thead" width="100%" align="$stylevar[left]">$vbphrase[forum]</td>
	  <td class="thead" width="175">$vbphrase[last_post]</td>
	  <td class="thead">$vbphrase[threads]</td>
	  <td class="thead">$vbphrase[posts]</td>
	  <if condition="$vboptions['showmoderatorcolumn']">
	  <td class="thead">$vbphrase[moderator]</td>
	  </if>
	</tr>
</thead>

$forumbits

<tbody>
	<tr>
		<td class="tfoot" align="center" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>"><div class="smallfont"><strong><a href="forumdisplay.php?$session[sessionurl]do=markread" rel="nofollow">$vbphrase[mark_forums_read]</a><if condition="$vboptions['forumleaders']">&nbsp; &nbsp;
			<a href="showgroups.php$session[sessionurl_q]" rel="nofollow">$vbphrase[view_forum_leaders]</a></if></strong></div></td>
	</tr>
</tbody>
</table>

$forumhome_markread_script

</div>
<!-- /Tabbed Forum Home  END Tab 1 Content Layout -->

<!-- Tabbed Forum Home  START Tab 2 Content Layout -->
<div id="tcontent2" class="tabcontent">

<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<thead>
	<tr align="center">
	  <td class="thead">&nbsp;</td>
	  <td class="thead" width="100%" align="$stylevar[left]">$vbphrase[forum]</td>
	  <td class="thead" width="175">$vbphrase[last_post]</td>
	  <td class="thead">$vbphrase[threads]</td>
	  <td class="thead">$vbphrase[posts]</td>
	  <if condition="$vboptions['showmoderatorcolumn']">
	  <td class="thead">$vbphrase[moderator]</td>
	  </if>
	</tr>
</thead>

<tbody>
	<tr>
		<td class="tcat" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>"><a style="float:right" href="#top" onclick="return toggle_collapse('forumbit_66')"><img id="collapseimg_forumbit_66" src="images/buttons/collapse_tcat.gif" alt="" border="0" /></a><a href="forumdisplay.php?f=6">CATEGORY NAME</a></td>
	</tr>
</tbody>

<tbody id="collapseobj_forumbit_66" style="">
$forumbits2
</tbody>

<tbody>
	<tr>
		<td class="tfoot" align="center" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>"><div class="smallfont"><strong><a href="forumdisplay.php?$session[sessionurl]do=markread" rel="nofollow">$vbphrase[mark_forums_read]</a><if condition="$vboptions['forumleaders']">&nbsp; &nbsp;<a href="showgroups.php$session[sessionurl_q]" rel="nofollow">$vbphrase[view_forum_leaders]</a></if></strong></div></td>
	</tr>
</tbody>
</table>

$forumhome_markread_script

</div>
<!-- /Tabbed Forum Home  END Tab 2 Content Layout -->

<!-- Tabbed Forum Home  START Tab 3 Content Layout -->
<div id="tcontent3" class="tabcontent">

<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<thead>
	<tr align="center">
	  <td class="thead">&nbsp;</td>
	  <td class="thead" width="100%" align="$stylevar[left]">$vbphrase[forum]</td>
	  <td class="thead" width="175">$vbphrase[last_post]</td>
	  <td class="thead">$vbphrase[threads]</td>
	  <td class="thead">$vbphrase[posts]</td>
	  <if condition="$vboptions['showmoderatorcolumn']">
	  <td class="thead">$vbphrase[moderator]</td>
	  </if>
	</tr>
</thead>

<tbody>
	<tr>
		<td class="tcat" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>"><a style="float:right" href="#top" onclick="return toggle_collapse('forumbit_808')"><img id="collapseimg_forumbit_808" src="images/buttons/collapse_tcat.gif" alt="" border="0" /></a><a href="forumdisplay.php?f=80">CATEGORY NAME</a></td>
	</tr>
</tbody>

<tbody id="collapseobj_forumbit_808" style="">
$forumbits3
</tbody>

<tbody>
	<tr>
		<td class="tcat" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>"><a style="float:right" href="#top" onclick="return toggle_collapse('forumbit_55')"><img id="collapseimg_forumbit_55" src="images/buttons/collapse_tcat.gif" alt="" border="0" /></a><a href="forumdisplay.php?f=5">CATEGORY NAME</a></td>
	</tr>
</tbody>

<tbody id="collapseobj_forumbit_55" style="">
$forumbits4
</tbody>

<tbody>
	<tr>
		<td class="tcat" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>"><a style="float:right" href="#top" onclick="return toggle_collapse('forumbit_33')"><img id="collapseimg_forumbit_33" src="images/buttons/collapse_tcat.gif" alt="" border="0" /></a><a href="forumdisplay.php?f=3">CATEGORY NAME</a></td>
	</tr>
</tbody>

<tbody id="collapseobj_forumbit_33" style="">
$forumbits5
</tbody>

<tbody>
	<tr>
		<td class="tfoot" align="center" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>"><div class="smallfont"><strong>
			<a href="forumdisplay.php?$session[sessionurl]do=markread" rel="nofollow">$vbphrase[mark_forums_read]</a>
			<if condition="$vboptions['forumleaders']">&nbsp; &nbsp;
			<a href="showgroups.php$session[sessionurl_q]" rel="nofollow">$vbphrase[view_forum_leaders]</a></if>
		</strong></div></td>
	</tr>
</tbody>
</table>

$forumhome_markread_script

</div>
<!-- /Tabbed Forum Home  END Tab 3 Content Layout -->

<!-- /main -->


<!-- Tabbed Forums switch tab script -->
<script type="text/javascript">
var myforumtabs=new ddtabcontent("forumtabs") 
myforumtabs.setpersist(true) 
myforumtabs.setselectedClassTarget("link") 
myforumtabs.init()
</script>
<!-- /end Tabbed Forums switch tab script -->

FINAL TEST STEP (19)

19. Now, test it out and modify the template to include the Categories you wish to display for each tab.  You can have as many tabs as you want.  Once you are satisfied with what you have done, simply copy the FORUMHOME Template code from the Child Style and place replace it into the Parent Style and at the same time, rename index.php to indexOLD.php (or what ever your naming convention style is) and rename index_tab.php to index.php 

Again, keep in mind, I wrote this with the assumption that you are fairly well versed and comfortable with editing files and following the flow of things.  If there is something you don't understand, PLEASE let me know so that I can help you understand it.
